import React from 'react';
import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Box,
  Typography,
  Chip,
} from '@mui/material';

export interface BillType {
  code: string;
  name: string;
  category: string;
  isIncome: boolean;
}

const BILL_TYPES: BillType[] = [
  // 收入类型
  { code: 'INCOME', name: '收入', category: 'INCOME', isIncome: true },
  { code: 'SALARY', name: '工资', category: 'INCOME', isIncome: true },
  { code: 'BONUS', name: '奖金', category: 'INCOME', isIncome: true },
  { code: 'INVESTMENT', name: '投资收益', category: 'INCOME', isIncome: true },
  { code: 'REFUND', name: '退款', category: 'INCOME', isIncome: true },
  { code: 'PART_TIME', name: '兼职收入', category: 'INCOME', isIncome: true },
  { code: 'BUSINESS', name: '经营收入', category: 'INCOME', isIncome: true },
  { code: 'RENTAL', name: '租金收入', category: 'INCOME', isIncome: true },
  { code: 'INTEREST', name: '利息收入', category: 'INCOME', isIncome: true },
  { code: 'DIVIDEND', name: '分红收入', category: 'INCOME', isIncome: true },
  { code: 'GIFT', name: '礼金收入', category: 'INCOME', isIncome: true },
  { code: 'OTHER_INCOME', name: '其他收入', category: 'INCOME', isIncome: true },
  
  // 支出类型
  { code: 'EXPENSE', name: '支出', category: 'EXPENSE', isIncome: false },
  { code: 'FOOD', name: '餐饮', category: 'EXPENSE', isIncome: false },
  { code: 'TRANSPORT', name: '交通', category: 'EXPENSE', isIncome: false },
  { code: 'SHOPPING', name: '购物', category: 'EXPENSE', isIncome: false },
  { code: 'ENTERTAINMENT', name: '娱乐', category: 'EXPENSE', isIncome: false },
  { code: 'HOUSING', name: '住房', category: 'EXPENSE', isIncome: false },
  { code: 'UTILITIES', name: '水电费', category: 'EXPENSE', isIncome: false },
  { code: 'MEDICAL', name: '医疗', category: 'EXPENSE', isIncome: false },
  { code: 'EDUCATION', name: '教育', category: 'EXPENSE', isIncome: false },
  { code: 'INSURANCE', name: '保险', category: 'EXPENSE', isIncome: false },
  { code: 'INVESTMENT_EXPENSE', name: '投资支出', category: 'EXPENSE', isIncome: false },
  { code: 'OTHER_EXPENSE', name: '其他支出', category: 'EXPENSE', isIncome: false },
  
  // 转账类型
  { code: 'TRANSFER', name: '转账', category: 'TRANSFER', isIncome: false },
  { code: 'TRANSFER_IN', name: '转入', category: 'TRANSFER', isIncome: true },
  { code: 'TRANSFER_OUT', name: '转出', category: 'TRANSFER', isIncome: false },
  
  // 借贷类型
  { code: 'LOAN', name: '借贷', category: 'LOAN', isIncome: false },
  { code: 'LEND', name: '借出', category: 'LOAN', isIncome: false },
  { code: 'BORROW', name: '借入', category: 'LOAN', isIncome: true },
];

interface BillTypeSelectorProps {
  value: string;
  onChange: (value: string) => void;
  label?: string;
  showCategory?: boolean;
}

export function BillTypeSelector({ 
  value, 
  onChange, 
  label = '账单类型',
  showCategory = false 
}: BillTypeSelectorProps) {
  const selectedBillType = BILL_TYPES.find(type => type.code === value);

  return (
    <Box>
      <FormControl fullWidth>
        <InputLabel>{label}</InputLabel>
        <Select
          value={value}
          label={label}
          onChange={(e) => onChange(e.target.value)}
        >
          {BILL_TYPES.map((type) => (
            <MenuItem key={type.code} value={type.code}>
              <Box display="flex" alignItems="center" gap={1}>
                <Typography>{type.name}</Typography>
                {showCategory && (
                  <Chip 
                    label={type.category} 
                    size="small" 
                    color={type.isIncome ? 'success' : 'default'}
                    variant="outlined"
                  />
                )}
              </Box>
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      
      {selectedBillType && (
        <Box mt={1}>
          <Chip 
            label={selectedBillType.isIncome ? '收入' : '支出'} 
            color={selectedBillType.isIncome ? 'success' : 'error'}
            size="small"
          />
        </Box>
      )}
    </Box>
  );
}

export { BILL_TYPES };
